import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
import _createClass from "@babel/runtime/helpers/esm/createClass";
import _inherits from "@babel/runtime/helpers/esm/inherits";
import _createSuper from "@babel/runtime/helpers/esm/createSuper";
import _isFunction from "lodash/isFunction";
import _forEach from "lodash/forEach";
import _isEmpty from "lodash/isEmpty";
import _clone from "lodash/clone";

/**
 * DropComponent
 * @date 2018/10/10
 */
import React from 'react';
import { DropTarget } from 'react-dnd';
import { attributeNameProp, attributeValueProp, DragType } from "../../config";
import styles from "../index.less?modules";
/**
 * 创建一个 DropComponent 包装组件
 * @param {{dropAcceptTypes: string | string[], drop: Function}} - 配置
 * @param {string|string[]} [dropAcceptTypes=[DragType.dragField, DragType.drawDragComponent]] - 接收 drop 的类型
 * @param {Function} drop - 触发drop后的回调方法
 */

export default function createDropComponent() {
  var _dec, _class;

  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
      _ref$dropAcceptTypes = _ref.dropAcceptTypes,
      dropAcceptTypes = _ref$dropAcceptTypes === void 0 ? [DragType.dragField, DragType.drawDragComponent] : _ref$dropAcceptTypes,
      _ref$drop = _ref.drop,
      drop = _ref$drop === void 0 ? defaultDrop : _ref$drop;

  var dropComponentSpec = {
    drop: drop
  };

  var dropComponentCollect = function dropComponentCollect(connect, monitor) {
    var connectDropTarget = connect.dropTarget();
    var isOver = monitor.isOver();
    return {
      connectDropTarget: connectDropTarget,
      isOver: isOver
    };
  }; // drop component only accepts dragField, dragComponent and drawDragComponent


  var DropComponent = (_dec = DropTarget(dropAcceptTypes, dropComponentSpec, dropComponentCollect), _dec(_class = /*#__PURE__*/function (_React$Component) {
    _inherits(DropComponent, _React$Component);

    var _super = _createSuper(DropComponent);

    function DropComponent() {
      _classCallCheck(this, DropComponent);

      return _super.apply(this, arguments);
    }

    _createClass(DropComponent, [{
      key: "render",
      value: function render() {
        var _this$props = this.props,
            _this$props$component = _this$props.component,
            component = _this$props$component === void 0 ? {} : _this$props$component,
            connectDropTarget = _this$props.connectDropTarget,
            currentEditComponent = _this$props.currentEditComponent,
            currentEditField = _this$props.currentEditField,
            children = _this$props.children;

        var config = _clone(component);

        var configProps = {};

        _forEach(config.props, function (prop) {
          configProps[prop[attributeNameProp]] = prop[attributeValueProp];
        });

        delete config.props;
        Object.assign(config, configProps);
        var dropComponentClassNames = [styles['drop-component']];

        if (!currentEditField && currentEditComponent === component) {
          dropComponentClassNames.push(styles['drop-component-active']);
        }
        /**
         * notice
         * 字段布局 和 字段 之间包一层 DrawDrag 和 Drop
         */


        return connectDropTarget && connectDropTarget( /*#__PURE__*/React.createElement("div", {
          className: dropComponentClassNames.join(' ')
        }, _isEmpty(component.fields) ? '拖入组件' : children));
      }
    }]);

    return DropComponent;
  }(React.Component)) || _class);
  return DropComponent;
}

function defaultDrop(props, monitor) {
  if (!monitor.didDrop()) {
    // 如果在子组件中已经 drop 了, 这边就不需要继续 drop 了
    var dragType = monitor.getItemType();

    if (dragType === DragType.dragField) {
      var onAddField = props.onAddField,
          component = props.component,
          currentEditComponent = props.currentEditComponent;

      if (component === currentEditComponent) {
        if (_isFunction(onAddField)) {
          onAddField(component, monitor.getItem().component);
        }
      }
    }
  }
}